<template>
	<view class="content">
		<view class="center-box relative">
			<!-- 自定义导航栏 -->
			<view class="top" :style="{background: showTop?'white':'',zIndex:'10'}">
				<uni-nav-bar :fixed="true" shadow background-color="none" status-bar left-icon="left" :color="showTop?'black':'white'" @clickLeft="back" />
				</uni-nav-bar>
			</view>
			<!-- 浮动盒子 -->
			<view class="fudong">
				<view class="qie" @click="indexJia(1)">
					<image src="/static/index/wave_arrowupa.png"></image>
				</view>
				<swiper class="swiperaa" circular autoplay interval="4000" :current="shopIndex" @change="swiperChange" v-if="JSON.stringify(blindList)!=='{}'">
					<swiper-item v-for="(item, index) in blindList.goodsList" :key="index">
						<view class="qrqrq">
							<view class="qiu">
								<image class="img" :src="item.imgUrlList[0]" ></image>
								<image class="level" :src="item.level==1?'/static/index/z1.png':item.level==2?'/static/index/z2.png':item.level==3?'/static/index/xiyou.png':item.level==4?'/static/index/zg.png':''"></image>
							</view>
						</view>
						<!-- 价格 -->
							<view class="price-box absolute">￥{{blindList.newprice}}</view>
						<!-- 名字 -->
						<view class="name-box absolute">{{item.dragonBallFlag!==1?item.name:'龙珠（只能兑换商品）'}}</view>
					</swiper-item>
				</swiper>
				<view class="qie" @click="indexJia(2)">
					<image src="/static/index/wave_arrowup.png"></image>
				</view>
			</view>
			
			<!-- 等级 -->
			<view class="level-box">
				<view class="box">
					<view class="title">
						<text v-if="JSON.stringify(blindList)!=='{}'">{{blindList.name}}</text>
						<view class="aaimage1"></view>
					</view>
						<view class="bdbz">100%中价值<text class="text" v-if="JSON.stringify(blindList)!=='{}'">{{blindList.newprice}}~{{blindList.newprice}}</text></view>
					<view class="level" :class="showTop?'levelFixed':''" :style="{top: topHeight+'px'}" v-if="JSON.stringify(blindList)!=='{}'">
						<view class="item" v-for="(item,index) in levelData" :key="index" @click="levelChange(item.level)">
							<image class="topimg" :src="item.image"></image>
							<view class="texta" :class="'texta'+index">{{index==0?blindList.level1Rate:index==1?blindList.level2Rate:index==2?blindList.level3Rate:index==3?blindList.level4Rate:'0'}}</view>
							<view class="chose">
								<image :src="item.chose" v-show="levelIndex==item.level"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品显示区域 -->
		<view class="shop-box" v-if="shopData.length>0">
			<view class="item" v-for="(item,index) in shopData" :key="index" @click="goDetails(item.id)">
				<view class="left">
					<view class="img">
						<image :src="item.imgUrlList[0]"></image>
					</view>
					<image class="lel" :src="item.level==1?'/static/index/z1.png':item.level==2?'/static/index/z2.png':item.level==3?'/static/index/xiyou.png':item.level==4?'/static/index/zg.png':''"></image>
				</view>
				<view class="right">
					<view class="title sl1">{{item.name}}</view>
					<view class="pr" v-if="item.dragonBallFlag==1">参考价：无价之宝</view>
						<view class="pr" v-else>参考价：￥{{blindList.newprice}}</view>
					<view class="rrr">
						<text>获得概率：{{(levelIndex-1)===0?blindList.level1Rate:(levelIndex-1)===1?blindList.level2Rate:(levelIndex-1)===2?blindList.level3Rate:(levelIndex-1)===3?blindList.level4Rate:'0'}}</text>
					</view>
				</view>
			</view>
			<uni-load-more status="noMore"></uni-load-more>
		</view>
		<!-- 商品空盒子 -->
		<view class="kong-box" v-else>
			<my-kong></my-kong>
		</view>
		<!-- 底部购买区域 -->
		<view class="btn-box">
			<view class="btn">
				<view class="box" hover-class="scla" @click="openBuy"></view>
			</view>
		</view>
		<!--购买弹窗 -->
		<my-buy ref="showBuy" sourceType="blindDetail" type="bottom" :boxId="boxId" :maskClick="true" @change="changeBuy" v-if="boxId&&$cookie.get('token')"></my-buy>
	</view>
</template>

<script>
var _this;
import { priceInteger } from "@/utils";
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
export default {
	data() {
		return {
			blindList: [],
			boxId:'', //盲盒ID
			shopIndex:0, //定位商品
			shopData:[], //商品盒子
			levelData:[
				{image:'/static/index/z1.png',chose:'/static/index/csbto.png',level:1},
				{image:'/static/index/z2.png',chose:'/static/index/ssbto.png',level:2},
				{image:'/static/index/xiyou.png',chose:'/static/index/xybto.png',level:3},
				{image:'/static/index/zg.png',chose:'/static/index/zgbto.png',level:4}
			],
			levelIndex:1, //定位等级选项
			showTop:false, //页面滚动显示隐藏样式
			topHeight:'',
		};
	},
	onLoad(options) {
		_this = this;
		if(options.id){
			_this.boxId=options.id;
			_this.getBlindList();
		}
	},
	onShow() {},
	mounted() {
		// 设置置顶高度（状态栏和返回区域相加，状态栏会变化）
		_this.topHeight=uni.getSystemInfoSync().statusBarHeight+44;
	},
	// 页面滚动
	onPageScroll(e) {
		this.showTop=e.scrollTop>340?true:false;
	},
	methods: {
		back() {
			_this.$routerTo.navigateBack();
		},
		levelChange(index){
			if(_this.levelIndex==index){
				return;
			}
			_this.levelIndex=index;
			_this.shopData=[];
			_this.screenLevel();
		},
		// 筛选等级商品
		screenLevel(){
			_this.blindList.goodsList.forEach((item, index) => {
				if(item.level==_this.levelIndex){
					_this.shopData.push(item);
				}
			})
		},
		indexJia(type){
			if(type==1){
				if(_this.shopIndex<=0){
					_this.shopIndex=_this.blindList.goodsList.length-1;
					return;
				}
				_this.shopIndex--;
			}else if(type==2){
				if(_this.shopIndex>_this.blindList.goodsList.length-2){
					_this.shopIndex=0;
					return;
				}
				_this.shopIndex++;
			}
		},
		swiperChange(event) {
			_this.shopIndex = event.detail.current;
		},
		getBlindList() {
			_this.$HTTP({
				method: 'GET',
				url: 'shopServer/box/getBoxDetail/'+_this.boxId,
				data: {
					time: Date.parse(new Date())
				}
				// header:'form'
			}).then(res => {
				res.newprice=priceInteger(res.price);
				res.goodsList.forEach((item, index) => {
					item.newprice = priceInteger(item.price);
					item.newrecyclePrice = priceInteger(item.recyclePrice);
				})
				res.openTypeList.forEach((item, index) => {
					item.newprice = priceInteger(item.price);
					item.newcutPrice = priceInteger(item.cutPrice);
				})
				
				_this.blindList = res;
				_this.screenLevel();
			}).catch(err => {
				console.log(err);
			});
		},
		// 购买弹窗事件
		changeBuy(e) {},
		closeBuy() {
			_this.$nextTick(() => {
				_this.$refs['showBuy'].close();
			});
		},
		openBuy() {
			if(this.$cookie.get('token')){
				_this.$nextTick(() => {
					_this.$refs['showBuy'].open();
				});
			}else{
				_this.$routerTo.reLaunch({
					path: '/pages/index/login'
				});
			}
		},
		goDetails(id){
			uni.navigateTo({
				url: '/pages/index/productDetails?id='+id
			});
		},
	}
};
</script>

<style>
	page{
		background: white;
	}
</style>
<style lang="scss" scoped>
.levelFixed{
	width: 100vw !important;
	background: white !important;
	position: fixed;
	left: 0;
	z-index: 10;
	margin-top: 0 !important;
}
.scla{
	transform: scale(.95);
}
@keyframes animate {
	0% {
		transform: translateY(60rpx);
		// filter: hue-rotate(180deg);
		/* hue-rotate 色彩转换传递的参数为角度，
			该角度指向的颜色圆盘上的颜射就是当前显示的颜色 */
	}
	50% {
		transform: translateY(0rpx);
	}
	100% {
		transform: translateY(60rpx);
	}
}
.content {
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 290rpx;
	.center-box {
		width: 100%;
		height: 1197rpx;
		background-image: url('https://home.miaokaikeji.com/web/applet/newimg/binddetailsbg.png');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		.top{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
		}
		.fudong {
			width: 100%;
			position: absolute;
			left: 0;
			top: 15vh;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 32rpx;
			.qie{
				width: 64rpx;
				height: 64rpx;
				image{
					width: 64rpx;
					height: 64rpx;
				}
			}
			.swiperaa {
				width: 100%;
				height: 600rpx;
				position: relative;
				.qrqrq {
					width: 100%;
					display: flex;
					align-items: flex-end;
					justify-content: center;
					position: relative;
					.qiu {
						width: 300rpx;
						height: 300rpx;
						animation: animate 2.5s linear infinite;
						animation-delay: calc(var(--i) * 0.5s);
						position: relative;
						.img{
							width: 300rpx;
							height: 190rpx;
						}
						.level{
							width: 110rpx;
							height: 120rpx;
							position: absolute;
							right: -60rpx;
							top: 0;
						}
					}
				}
				.price-box {
					width: 100%;
					text-align: center;
					font-weight: bold;
					color: #51fffa;
					left: 0;
					bottom: 120rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #FFE11D;
				}
				.name-box {
					width: 100%;
					height: 120rpx;
					display: flex;
					align-items: center;
					left: 0;
					bottom: 0;
					color: #3E3631;
					font-size: 32rpx;
					justify-content: center;
					text-align: center;
				}
			}
		}
		.level-box{
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			box-sizing: border-box;
			padding: 0 24rpx;
			background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
			.box{
				width:100%;
				height: 350rpx;
				background-image: url('https://home.miaokaikeji.com/web/applet/newimg/qixgzbg.png');
				background-size: 100% 100%;
				box-sizing: border-box;
				padding: 0 28rpx 0 28rpx;
				.title{
					width: 100%;
					font-weight: bold;
					font-size: 34rpx;
					color: black;
					display: flex;
					align-items: center;
					justify-content: space-between;
					transform: translateY(-20rpx);
					.aaimage1{
						width: 114rpx;
						height: 114rpx;
						line-height: 114rpx;
						text-align: center;
						font-size: 28rpx;
						color: white;
					}
				}
				.bdbz{
					width: 100%;
					font-size: 26rpx;
					color: #666666;
					transform: translateY(-35rpx);
					.text{
						color: #FF9416;
					}
				}
				.level{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item{
						width: 110rpx;
						height: 190rpx;
						.topimg{
							width: 100%;
							height: 120rpx;
						}
						.texta0{
							color: #FFC852;
						}
						.texta1{
							color: #9015FF;
						}
						.texta2{
							color: #FF2573;
						}
						.texta3{
							color: #3480FF;
						}
						.texta{
							width: 100%;
							text-align: center;
							transform: translateY(-10rpx) translateX(3rpx);
							font-size: 26rpx;
							margin-left: 10rrpx;
						}
						.chose{
							width: 100%;
							display: flex;
							justify-content: center;
							image{
								width: 34rpx;
								height: 30rpx;
							}
						}
					}
				}
			}
		}
	}
	.shop-box{
		width: 100%;
		box-sizing: border-box;
		padding: 0 58rpx;
		.item{
			width: 100%;
			// height: 192rpx;
			background: #FBFBFB;
			border-radius: 20rpx;
			margin-bottom: 18rpx;
			box-sizing: border-box;
			padding: 16rpx 20rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				width: 160rpx;
				height: 160rpx;
				position: relative;
				.img{
					width: 160rpx;
					height: 160rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 160rpx;
						height: 100rpx;
					}
				}
				.lel{
					width: 70rpx;
					height: 77rpx;
					position: absolute;
					left: -20rpx;
					top: -20rpx;
				}
			}
			.right{
				width: 100%;
				margin-left: 30rpx;
				.title{
					width: 100%;
					color: #333333;
					font-size: 30rpx;
				}
				.pr{
					width: 100%;
					margin-top: 15rpx;
					display: flex;
					align-items: center;
					color: #FF9416;
					font-weight: bold;
					font-size: 30rpx;
				}
				.rrr{
					width: 100%;
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.okl{
						display: flex;
						align-items: center;
						justify-content: space-between;
						image{
							width: 32rpx;
							height: 30rpx;
							margin-right: 8rpx;
						}
						text{
							font-size: 26rpx;
							color: #333333;
						}
					}
				}
			}
		}
	}
	.kong-box{
		width: 100%;
		height: 400rpx;
	}
	.btn-box{
		width: 100%;
		height: 242rpx;
		background-image: url('https://home.miaokaikeji.com/web/applet/newimg/kaixbtn.png');
		background-size: 100% 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		.price{
			width: 100%;
			box-sizing: border-box;
			padding: 0 66rpx;
			margin-top: 68rpx;
			.box{
				width: 100%;
				height: 117rpx;
				background-image: url('https://home.miaokaikeji.com/web/applet/newimg/freebtn.png');
				background-size: 100% 100%;
				animation: scaleDraw 4s ease-in-out infinite;
				-webkit-animation: scaleDraw 4s ease-in-out infinite;
			}
		}
		.btn{
			width: 100%;
			box-sizing: border-box;
			padding: 0 66rpx;
			margin-top: 68rpx;
			.box{
				width: 100%;
				height: 117rpx;
				background-image: url('https://home.miaokaikeji.com/web/applet/newimg/kaix.png');
				background-size: 100% 100%;
				animation: scaleDraw 4s ease-in-out infinite;
				-webkit-animation: scaleDraw 4s ease-in-out infinite;
			}
		}
	}
}
</style>
